import { useEffect, useRef, useState } from "react";
import appApi from "../appApi";
import { Button, Form, Input } from "antd";
import SelectApi from './selectApi';
import { ActionType } from "@ant-design/pro-components";
import SelectMenus from '@/components/SelectMenus'
export default (props) => {
    const actionRef = useRef<ActionType>();
    const selectMenusRef = useRef<ActionType>();
    const [selectmenuindex, setselectmenuindex] = useState(null);
    const echartsTypeValueObj = {
        'line': '折线图',
        'bar': '柱状图',
        'pie': '饼图',
    }
    const cardTypeValueObj = {
        '1': '样式1',
        '2': '样式2',
        '3': '样式3',
        '4': '样式4',
    }
    const [option, setoption] = useState({})
    const handleOption = () => {
        console.log(props.typeOption.type);
        let optionn = {
            apilist: [],
            other: ''
        }
        switch (props.typeOption.type) {
            case 'line':
            case 'bar':
                optionn.apilist = [
                    {
                        'apiID': '',
                        'name': '',
                        'apiParam': '',
                        'other': ''
                    },
                ]
                break;
            case 'pie':
                optionn.apilist = [
                    {
                        'apiID': '',
                        'name': '',
                        'apiParam': '',
                        'other': ''
                    },
                ]
                break;
            case 'card1':
                optionn.apilist = [
                    {
                        'apiID': '',
                        'name': '',
                        'apiParam': '',
                    },
                    {
                        'apiID': '',
                        'name': '',
                        'apiParam': ''
                    },
                    {
                        'apiID': '',
                        'name': '',
                        'apiParam': ''
                    }
                ]
                break;
            case 'card2':
            case 'card3':
            case 'card4':
                optionn.apilist = [
                    {
                        'apiID': '',
                        'name': '',
                        'apiParam': ''
                    },
                ]
                break;
            case 'progress':
                optionn.apilist = [
                    {
                        'apiID': '',
                        'name': '',
                        'apiParam': ''
                    },
                ]
                break;
            default:
                break;
        }
        setoption(optionn);
        console.log('set.blockConf')
        console.log(optionn)
        if (props.isinit) {
            props.setblockConf(optionn)
        }

    }
    const selectMenu = (index) => {
        setselectmenuindex(index);
        selectMenusRef.current && selectMenusRef.current.init();
    }
    useEffect(() => {
        if (props.typeOption.type && props.isinit) {
            handleOption();
        }
    }, [props.typeOption.type])

    useEffect(() => {
        if (props.typeOption.type && props.typeOption) {
            if (Object.keys(props.blockConf).length == 0 && props.isinit) {
                handleOption();
            } else {
                console.log('props.blockConf')
                console.log(props.blockConf);
                setoption(props.blockConf);
            }
        }


    }, [props.typeOption.type, props.blockConf])

    return <div>
        {
            props.typeOption.blockTypeValue == 1 && <div>
                {
                    option.apilist && option.apilist.map((item, index) => {
                        return <div key={index} className="apiitem">
                            <Form layout="inline">
                                <Form.Item label="指标" onClick={() => {
                                    actionRef.current.init(index);
                                }} >
                                    <div style={{ cursor: 'pointer', width: '150px' }}><a>{item.name ? item.name : '请选择指标'}</a></div>
                                </Form.Item>
                                <Form.Item label="指标参数">
                                    <Input.TextArea value={item.apiParam} style={{ width: 300 }} onChange={(e) => {
                                        let noption = { ...option };

                                        noption.apilist[index].apiParam = e.target.value
                                        setoption(noption)
                                    }} />
                                </Form.Item>
                                <Form.Item label="跳转页面">
                                    <div style={{ cursor: 'pointer', width: '150px' }}><a onClick={() => selectMenu(index)}>{item.tomenuName ? item.tomenuName : '请选择（可为空）'}</a></div>
                                </Form.Item>
                            </Form>
                        </div>
                    })
                }
                {
                    props.typeOption.type == 'card4' && <div>
                        <div style={{ height: '15px' }}></div>
                        <Button onClick={() => {
                            let noption = { ...option };
                            noption.apilist.push({
                                'apiID': '',
                                'name': '',
                                'apiParam': '',
                                'other': ''
                            });
                            setoption(noption)
                        }}>新增指标</Button>

                    </div>
                }
            </div>
        }
        {
            (props.typeOption.blockTypeValue == 2 || props.typeOption.blockTypeValue == 4) && <div>
                {
                    option.apilist && option.apilist.map((item, index) => {
                        return <div key={index} className="apiitem">
                            <Form layout="inline">
                                <Form.Item label="指标" onClick={() => {
                                    actionRef.current.init(index);
                                }} >
                                    <div style={{ cursor: 'pointer', width: '150px' }}><a>{item.name ? item.name : '请选择指标'}</a></div>
                                </Form.Item>
                                <Form.Item label="指标参数">
                                    <Input.TextArea value={item.apiParam} style={{ width: 300 }} onChange={(e) => {
                                        let noption = { ...option };

                                        noption.apilist[index].apiParam = e.target.value
                                        setoption(noption)
                                    }} />
                                </Form.Item>

                            </Form>
                        </div>
                    })
                }
                <div style={{ height: '15px' }}></div>

                <Button onClick={() => {
                    let noption = { ...option };
                    noption.apilist.push({
                        'apiID': '',
                        'name': '',
                        'apiParam': '',
                        'other': ''
                    });
                    setoption(noption)
                }}>新增指标</Button>
                <div style={{ height: '15px' }}></div>

                <Form>
                    <Form.Item label="echarts配置">
                        <Input.TextArea value={option.other} style={{ width: '100%' }} rows={10} onChange={(e) => {
                            let noptionn = { ...option };
                            noptionn.other = e.target.value
                            setoption(noptionn)
                            if (props.isinit) {
                                props.setblockConf(noptionn)
                            }
                        }} />
                    </Form.Item>
                </Form>

            </div>
        }
        {
            props.typeOption.blockTypeValue == 3 && <div>
                {
                    option.apilist && option.apilist.map((item, index) => {
                        return <div key={index} className="apiitem">
                            <Form layout="inline">
                                <Form.Item label="指标" onClick={() => {
                                    actionRef.current.init(index);
                                }} >
                                    <div style={{ cursor: 'pointer', width: '150px' }}><a>{item.name ? item.name : '请选择指标'}</a></div>
                                </Form.Item>
                                <Form.Item label="指标参数">
                                    <Input.TextArea value={item.apiParam} style={{ width: 300 }} onChange={(e) => {
                                        let noption = { ...option };

                                        noption.apilist[index].apiParam = e.target.value
                                        setoption(noption)
                                    }} />
                                </Form.Item>
                            </Form>
                        </div>
                    })
                }
            </div>
        }
        <SelectApi
            ref={actionRef}
            sure={(data, index) => {
                let noption = { ...option };
                noption.apilist[index].apiID = data.api_id
                noption.apilist[index].name = data.api_name
                setoption(noption)
            }}
        />
        <SelectMenus
            ref={selectMenusRef}
            callback={(data) => {
                let noption = { ...option };
                noption.apilist[selectmenuindex].tomenuName = data.menuName
                noption.apilist[selectmenuindex].tomenuId = data.menuId
                noption.apilist[selectmenuindex].tomenuKey = data.menuKey
                setoption(noption)
            }}
        />
    </div>;
}

